<template>
  <div>

  <basic-container>
    <vue-element-loading :active="loading" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
    <el-form :inline="true">
      <div style="margin-top: 22px">
        <el-form-item>
          <el-select v-model="formInline.projectId" :popper-append-to-body="true" filterable @change="selectProject"  clearable placeholder="游戏">
            <el-option
              v-for="item in gamelist"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input placeholder="玩家账号" v-model=" formInline.account " clearable class="input-with-select">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model=" formInline.statppp " clearable placeholder="状态">
            <el-option label="未使用" value="0"></el-option>
            <el-option label="已使用" value="1"></el-option>
            <el-option label="已过期" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.orderNum"  clearable placeholder="关联订单号"/>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.createUser"   clearable  placeholder="发放人">
            <el-option
              v-for="item in leadList"
              :key="item.id"
              :label="item.account"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="usageTime"
            clearable
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="使用开始日期"
            end-placeholder="使用结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="releaseTime"
            clearable
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="发放开始日期"
            end-placeholder="发放结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="time"
            clearable
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="有效开始日期"
            end-placeholder="有效结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary"  @click="onSubmit">查询</el-button>
          <el-button icon="el-icon-download" type="primary" @click="handleExport">导出Excel</el-button>
          <el-button type="danger" @click="deleteExpired">删除已过期</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-row>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            stripe
            :summary-method="getSummaries"
            show-summary
            style="width: 100%">
            <el-table-column
              prop="gameName"
              label="游戏">
            </el-table-column>
            <el-table-column
              prop="account"
              label="玩家账号">
              <template slot-scope="scope">
                <span v-if="scope.row.phone!='' && scope.row.registerWay == 1"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                <span v-else><span
                  class="skucost-pruice">{{ scope.row.account}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              label="区服-角色">
              <template slot-scope="scope">
                <span ><span
                  class="skucost-pruice">{{scope.row.serverName}}-{{scope.row.roleName}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              label="优惠券类型">
              <template slot-scope="scope">
                <span v-if="scope.row.type==1"><span
                  class="skucost-pruice">满减</span></span>
                <span v-if="scope.row.type==2"><span
                  class="skucost-pruice">无门槛</span></span>
              </template>s
            </el-table-column>
            <el-table-column
              prop="couponName"
              label="优惠券名称">
            </el-table-column>
            <el-table-column
              prop=""
              label="优惠券金额">
              <template slot-scope="scope">
                <span v-if="scope.row.amount!=''"><span
                  class="skucost-pruice">{{ Number(scope.row.amount)/100}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.stat==1"><span
                  class="skucost-pruice">已使用</span></span>
                <span v-else-if="scope.row.stat==0&&(new Date(scope.row.endDate)<new Date())"><span
                  class="skucost-pruice">已过期</span></span>
                <span v-else><span
                  class="skucost-pruice">未使用</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="spendName"
              label="关联订单号">
            </el-table-column>

            <el-table-column
              prop="payTime"
              label="使用时间">
            </el-table-column>
            <el-table-column
              prop="name"
              label="发放人">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="发放时间">
            </el-table-column>
            <el-table-column
              prop="payTime"
              label="有效时间">
              <template slot-scope="scope">
                <span ><span
                  class="skucost-pruice">{{ scope.row.startDate}} 至{{ scope.row.endDate}}  </span></span>
              </template>
            </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <span v-if="scope.row.stat==0&&(new Date(scope.row.endDate)>new Date())"><el-button type="text" size="small" @click.native="recycle(scope.row.id)">回收</el-button></span>
            </template>
          </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10,20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-col>
    </el-row>

  </basic-container>
  </div>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>


<script>

import {gamePhoneList,gameList} from "@/api/game/game";
import {getToken} from "@/util/auth";

import {cloneObj, parseParam} from "@/util/util";
import {count, gamecouponPage, lssuerList, oneClickDelete, removeCoupon} from "@/api/app/gamecoupon";
import VueElementLoading from 'vue-element-loading'


export default {
  data() {
    return {
      leading:false,
      leadlevel:2,//会长等级
      lead:{},
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },

      usageTime:[],
      releaseTime:[],
      time:[],
      gamelist:[],
      gamePhonelist:[],
      formInline: {
        projectId:'',
        gameId: '',
        account: '',
        orderNum:'',
        statppp:'',
      },
      count:'',
      tableData:[],
      tableTotal:{},
    };

  },

  computed: {},
  components: {
    VueElementLoading
  },
  created() {

  },
  mounted() {
    this.onload();
    this.game();
    this.nowloadManger();
  },
  methods: {
    nowloadManger() {
      lssuerList().then(res => {
        const data = res.data.data;
        this.leadList = data;
      });
    },
    getSummaries() {
      let sums = [];
      sums[0] = '总计(小写)'
      sums[5] = Number(this.count)

      for(let i=0; i<=12; i++) {
        if(sums[i] === undefined) {
          sums[i] = ''
        }
      }
      sums = sums.map(item =>{
        if((typeof item) == "number"){
          return (item/100).toFixed(2)
        }else{
          return item
        }
      });
      return sums;
    },
    recycle(id){
      console.log("id",id)
      this.$confirm("确定要回收该玩家优惠券", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        removeCoupon(id).then(res => {
          console.log("resres",res)
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          var startTime = undefined;
          var endTime = undefined;
          var usageStartTime = undefined;
          var usageEndTime = undefined;
          var releaseStartTime = undefined;
          var releaseEndTime = undefined;

          this.onload(startTime, endTime,usageStartTime,usageEndTime,releaseStartTime,releaseEndTime);
        });
      })

    },
    deleteExpired(){
      this.$confirm("是否一键删除全部已过期的优惠券?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        oneClickDelete().then(res => {
          console.log("ress",res)
          if(res.data.success){
            this.onSubmit()
            this.$message({
              message: '删除成功！',
              type: 'success'
            });
          }else{
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        });
      });
    },
    handleExport() {
      console.log("this.formInline",this.formInline)
      this.$confirm("是否导出优惠券明细数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var forming={};
        forming = cloneObj(this.formInline)
        if (this.isNotEmpty(this.usageTime)) {
          forming.usageStartTime = this.usageTime[0].getTime()
          forming.usageEndTime = this.usageTime[1].getTime()
        }
        if (this.isNotEmpty(this.releaseTime)) {
          forming.releaseStartTime = this.releaseTime[0].getTime()
          forming.releaseEndTime = this.releaseTime[1].getTime()
        }
        if (this.isNotEmpty(this.time)) {
          forming.startTime = this.time[0].getTime()
          forming.endTime = this.time[1].getTime()
        }
        window.location.href = `/api/blade-app/gamecoupon/export-GameCouponExcel?blade-auth=${getToken()}&${parseParam(forming)}`
        this.formInline.startTime =''
        this.formInline.endTime =''
      });

    },
    handleSizeChange(val) {

      this.page.pageSize = val;
      var startTime = undefined;
      var endTime = undefined;
      var usageStartTime = undefined;
      var usageEndTime = undefined;
      var releaseStartTime = undefined;
      var releaseEndTime = undefined;

      this.onload(startTime, endTime,usageStartTime,usageEndTime,releaseStartTime,releaseEndTime);
    },
    handleCurrentChange(val) {

      this.page.currentPage = val;
      var startTime = undefined;
      var endTime = undefined;
      var usageStartTime = undefined;
      var usageEndTime = undefined;
      var releaseStartTime = undefined;
      var releaseEndTime = undefined;

      this.onload(startTime, endTime,usageStartTime,usageEndTime,releaseStartTime,releaseEndTime);
    },

    selectProject(value){
      this.$set(this.formInline, 'gameId', '')
      this.$set(this.formInline, 'serverNum', '')
      if(value==''){
        this.gameserverlist={};

      }
      this.formInline.projectId=value
      this.phone()

    },
    selectPhone(value){
      this.$set(this.formInline, 'serverNum', '')
      if(value==''){
        this.gameserverlist={};

      }
      this.formInline.gameId=value

    },

    phone(){

      gamePhoneList(this.formInline).then(res => {
        const data = res.data.data;
        this.gamePhonelist = data;
      });
    },
    game(){
      gameList(this.formInline).then(res => {
        const data = res.data.data;
        this.gamelist = data;
      });
    },
    // gameTypeList(){
    //   gameTypeList().then(res => {
    //     const data = res.data.data;
    //     this.gameType = data;
    //   });
    //
    // },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    isEmpty(arr) {
      return !this.isNotEmpty(arr)
    },

    onSubmit() {
      var startTime = undefined;
      var endTime = undefined;
      var usageStartTime = undefined;
      var usageEndTime = undefined;
      var releaseStartTime = undefined;
      var releaseEndTime = undefined;
      this.page.currentPage=1
      this.onload(startTime, endTime,usageStartTime,usageEndTime,releaseStartTime,releaseEndTime);
    },

    onload(startTime, endTime,usageStartTime,usageEndTime,releaseStartTime,releaseEndTime) {
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
       endTime = this.time[1].getTime()
      }
      if (this.isNotEmpty(this.usageTime)) {
        usageStartTime = this.usageTime[0].getTime()
        usageEndTime = this.usageTime[1].getTime()
      }
      if (this.isNotEmpty(this.releaseTime)) {
        releaseStartTime = this.releaseTime[0].getTime()
        releaseEndTime = this.releaseTime[1].getTime()
      }
      this.loading = true;
      gamecouponPage(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), startTime, endTime,usageStartTime,usageEndTime,releaseStartTime,releaseEndTime).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
      count(Object.assign(this.formInline), startTime, endTime,usageStartTime,usageEndTime,releaseStartTime,releaseEndTime).then(res => {
        console.log("resa",res)
        const data = res.data.data;
        this.count = data.count;

      });

    }
  }
}

</script>

<style>
</style>
